import { defineStore } from 'pinia'
import { ComponentType, RenderComponent } from '~/composables'


export interface ComponentGroup {
  id: string;
  name: string;
  remark: string;
  type: ComponentType
}

export interface ComponentInfo {
  id: string;
  startX: number;
  startY: number;
  endX: number;
  endY: number;
  groupId: string;
  type: ComponentType;
  pageNo: number;
}

export const useDrawPanelStore = defineStore('components', () => {
  const pagesComponents = ref<{
    [pageNo: string]: ComponentInfo[]
  }>({})
  const currentComponents = ref<ComponentInfo[]>([])
  const componentGroups = ref<ComponentGroup[]>([])

  const selectedComponentGroup = ref<Partial<ComponentGroup>>({})

  return {
    pagesComponents,
    currentComponents,
    componentGroups,
    selectedComponentGroup
  }
}, {
  persist: true
})
